<template>
  <div class="TabQualification">
    <slot></slot>
    <div class="content">
      <ul>
        <li @click="cur = 0" :class="{ active: cur == 0 }">资料文件展示</li>
        <li @click="cur = 1" :class="{ active: cur == 1 }">残疾人就业基地</li>
        <li @click="cur = 2" :class="{ active: cur == 2 }">残疾人管理培训</li>
        <li @click="cur = 3" :class="{ active: cur == 3 }">审核保障</li>
      </ul>
      <div class="tab-content">
        <div v-show="cur == 0">
            <div>
                <img src="@/assets/img/security/cbj4.png"  v-for="item in 4" :key="item" alt="">                   
            </div>
        </div>
        <div v-show="cur == 1">内容二</div>
        <div v-show="cur == 2">内容三</div>
        <div v-show="cur == 3">内容四</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabQualification",
  data() {
    return {
      cur: 0, //默认选中第一个tab
    };
  },
};
</script>


<style lang="less" scoped>
.TabQualification {
  width: 100%;
  height: 570px;
  background-color: #f6f5f3;
  .content {
    width: 60%;
    height: 400px;
    margin: 0 auto;
    display: flex;
    ul {
      flex: 2;
      li {
        background-color: #fff;
        height: 50px;
        margin: 15px 0;
        line-height: 50px;
        text-align: center;
        border-left: 2px #ccc solid;
      }
    }
    .tab-content {
      flex: 13;
      padding: 15px 15px;
      div {
      height: 100%;
        img {
            width: 36%;
            margin: 1% 0 0 4%;
        }    
      }
    }
  }
}
.active {
  border-left: 2px #099d4f solid !important;
}
</style>